<template>
  <div class="ordering" >
    <div class="heading">修改管理员信息</div>
    <div class="set-up-view">
      <div class="set-name">
        <div>用户名:</div>
        <div>{{currentUser.userName}}</div>
      </div>
      <div class="set-name">
        <div>昵称：</div>
        <div><el-input v-model="currentUser.nickName" placeholder="请输入昵称" style="width: 300px"></el-input></div>
      </div>
      <div class="set-name">
        <div>手机号：</div>
        <div><el-input v-model="currentUser.telephone" placeholder="请输入手机号" style="width: 300px"></el-input></div>
      </div>
      <div class="set-name">
        <div>邮箱：</div>
        <div><el-input v-model="currentUser.email" placeholder="请输入邮箱" style="width: 300px"></el-input></div>
      </div>
      <!-- 新增备注字段 -->
      <div class="set-name">
        <div>备注：</div>
        <div><el-input
            type="textarea"
            :rows="3"
            v-model="currentUser.remark"
            placeholder="请输入备注信息"
            style="width: 300px"></el-input>
        </div>
      </div>
    </div>
    <!-- 操作按钮区域 -->
    <div class="action-buttons">
      <el-button type="primary" size="medium" @click="updateInfo">保存信息</el-button>
      <el-button type="warning" size="medium" @click="openPasswordDialog">修改密码</el-button>
    </div>

    <!-- 密码修改弹窗 -->
    <el-dialog
        title="修改密码"
        :visible.sync="passwordDialogVisible"
        width="30%"
        center>
      <div class="password-form">
        <div class="form-item">
          <div class="label">旧密码：</div>
          <el-input
              v-model="passwordForm.oldPassword"
              type="password"
              placeholder="请输入旧密码"
              show-password></el-input>
        </div>
        <div class="form-item">
          <div class="label">新密码：</div>
          <el-input
              v-model="passwordForm.newPassword"
              type="password"
              placeholder="请输入新密码"
              show-password></el-input>
        </div>
        <div class="form-item">
          <div class="label">确认新密码：</div>
          <el-input
              v-model="passwordForm.confirmPassword"
              type="password"
              placeholder="请再次输入新密码"
              show-password></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="passwordDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updatePassword" :loading="passwordLoading">确 定</el-button>
      </span>
    </el-dialog>


  </div>

</template>

<script>
export default{
  data() {
    return {
      currentUser: {},
      passwordDialogVisible: false, // 控制密码弹窗显示
      passwordLoading: false,      // 密码修改加载状态
      passwordForm: {              // 密码表单数据
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      }
    }
  },
  methods:{
    openPasswordDialog() {
      this.passwordForm = {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      };
      this.passwordDialogVisible = true;
    },
    async updateInfo(){//修改管理员信息
      // 必填字段验证
      if(this.currentUser.nickName == ''){
        new this.mytitle(this.$message,'error','昵称不能为空！').funtitle()
        return;
      }

      // 手机号格式验证（可选）
      if(this.currentUser.telephone && !/^1[3-9]\d{9}$/.test(this.currentUser.telephone)){
        new this.mytitle(this.$message,'error','请输入正确的手机号格式！').funtitle()
        return;
      }

      // 邮箱格式验证（可选）
      if(this.currentUser.email && !/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(this.currentUser.email)){
        new this.mytitle(this.$message,'error','请输入正确的邮箱格式！').funtitle()
        return;
      }
        console.log("信息没问题")
      try {
        let res = await new this.Request(this.Urls.m().modifyInfo, this.currentUser).modepost()
        console.log("111")
        if(res.data.code == 0){
          new this.mytitle(this.$message,'success','管理员信息更新成功！').funtitle()
          // 更新本地存储的管理员信息
          localStorage.setItem("currentUser", JSON.stringify(res.data.updatedAdmin))
          console.log(res.data)
          console.log(res.data.data)
        }else{
          new this.mytitle(this.$message,'error','更新失败：' + res.data.msg).funtitle()
        }
      } catch(e) {
        console.error(e)
        new this.mytitle(this.$message,'error','发生错误，请重试').funtitle()
      }
    },

    // 修改密码
    async updatePassword() {
      // 验证表单
      if (!this.passwordForm.oldPassword) {
        this.$message.error('请输入旧密码！');
        return;
      }
      if (!this.passwordForm.newPassword) {
        this.$message.error('请输入新密码！');
        return;
      }
      if (!this.passwordForm.confirmPassword) {
        this.$message.error('请确认新密码！');
        return;
      }
      if (this.passwordForm.newPassword !== this.passwordForm.confirmPassword) {
        this.$message.error('两次输入的新密码不一致！');
        return;
      }

      this.passwordLoading = true;

      try {
        const requestData = {
          id: this.currentUser.id,
          oldPassword: this.passwordForm.oldPassword,
          newPassword: this.passwordForm.newPassword
        };

        let res = await new this.Request(this.Urls.m().modifyPassword, requestData).modepost();

        if (res.status === 200) {
          this.$message.success('密码修改成功！');
          this.passwordDialogVisible = false;
        } else {
          this.$message.error('修改失败：' + (res.data.msg || '请检查旧密码是否正确'));
        }
      } catch (e) {
        console.error(e);
        this.$message.error('修改密码时发生错误');
      } finally {
        this.passwordLoading = false;
      }
    },

  },
  created() {
    this.currentUser=JSON.parse(localStorage.getItem("currentUser"))
    console.log(this.currentUser)
  }
}
</script>

<style scoped="scoped">
.heading{font-size: 20px;
  font-weight: bold;
}
.set-up-view{max-width: 900px;
  margin-top: 30px;
}
.button-view-set{display: flex;
  justify-content: flex-end;
  margin-bottom: 30px;
}
.set-name{display: flex;
  align-items: center;
  margin-bottom: 30px;
}
.set-name div:nth-child(1){width: 100px;}
.set-name div:nth-child(2){flex: 1;}

.set-up-image{margin-bottom: 30px;}
.set-image img{
  width: 50%;
  height: 100%;
  border-radius: 5px;
}
.set-image{
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
}

.el-input__inner {
  width: 300px;
}
.action-buttons {
  margin-top: 30px;
  display: flex;
  gap: 20px;
}

.password-form {
  padding: 0 20px;
}

.form-item {
  margin-bottom: 20px;
}

.label {
  margin-bottom: 8px;
  font-weight: 500;
}

/* 弹窗标题样式 */
::v-deep .el-dialog__title {
  font-size: 18px;
  font-weight: bold;
}
</style>
